<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>委托房源</title>

    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="../layui-v2.6.8/layui/css/layui.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <script src="../layui-v2.6.8/layui/layui.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script src="../jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="css/bottom-cav.css">
    <style>
        .log_buttom {
            background-color: #21373d;
        }
        .cen-nav{
            margin-left: 40px;
            float: left;
           
        }
        .top-nav{
            height: 60px;
            width: 100%;
            background-color: #393D49;
        }
        a{text-decoration: none;}
        .pos{
            float: left;
            margin-top: 18px;
            margin-left: 150px;
            
        }
        .log-register{
            float: right;
            margin-right: 300px;
            margin-top: 18px;
            color: rgba(255,255,255,.7);
        }
        .log-register span a{
            color: rgba(255,255,255,.7);
            text-decoration: none;
        }
        .log-register span a:hover{
            color: white;
        }
        .center-content{
          
            
            width: 1250px;
            margin-left: 150px;
            
        }
        .top-seach{
            height: 80px;
            background-color: rgb(245, 245, 246);
        }
        .seach{
            width: 600px;
            margin-left: 150px;
            margin-top: 10px;
        }

        .rent-type{
            margin-left: 150px;
            height: 25px;
            margin-top: 15px;
            
        }
        .rent-type a{
            color: rgb(146, 146, 146);
        }
        .class-area span{
            margin-right: 15px;
        }
        .class-area span a{
            text-decoration: none;
            color: #101d37;
            
        }
        .class-area span a:hover{
            color: blue;
        }
        .class-area{
            width: 100%;
            height: 30px;
            margin-bottom: 5px;
        }   
        .house-sort-type div{
            border-right: 1px solid rgb(237, 237, 237);
            width: 85px;
            float: left;
            height: 53px;
            padding: 15px;
            margin-top: -18px;
        }
        #house-count{
            border: none;
            width: 300px;
            font-weight: bold;
            font-size: 18px;
            margin-left: 50px;
        }
        .house-data{
            margin-left: 150px;
            width: 1250px;
            margin-top: 20px;
        }
        .bottom-house-info-left{
            width: 900px;
     
            float: left;
            background-color: white;
        }
        .bottom-house-info-right{
            width: 250px;
            float: right;   
            background-color: white;
        }
        .bottom-house-info{
            margin-left: -20px;
            border: 1px solid blue;
       
        }
        .house-info{
            float: left;
            margin-bottom: 20px;
            margin-left: 20px;
        }
        .house-info-right{
            
            float: left;
            margin-left: 30px;
           
        }
        .house-info-right div{
            margin-top: 15px;
            color: #849aae;
        }
        .house-info-right div span{
            background-color:rgba(83, 92, 102, 0.1) ;
            padding: 5px;
        }
        .house-info img{
            border-radius: 10px;
        }
        .Pagination{
            float: left;
            margin-top: 20px;
            margin-left: 300px;
        }
    </style>
</head>
<body>
    <div class="top-nav">
        <div class="pos">
            <a href="search.html">
                <span class="glyphicon glyphicon-map-marker" style="font-weight: bold;color: rgba(255,255,255,.7) ;">&nbsp;吴中区</span>
            </a>
        </div> 
        <div class = "cen-nav"> 
              <ul class="layui-nav" style="font-weight:bolder;">
                
                <li class="layui-nav-item"><a href="">首页</a></li>
                
                <li class="layui-nav-item"><a href="">立即找房</a></li>
                <li class="layui-nav-item"><a href="">合租</a></li>
                <li class="layui-nav-item"><a href="">整租</a></li>
                <li class="layui-nav-item"><a href="">社区</a></li>
                <li class="layui-nav-item"><a href="">整租</a></li>
                <li class="layui-nav-item"><a href="">社区</a></li>
              </ul>
        </div>
        <div class="log-register">
            <span><a href="">登录</a></span>
            <span>|</span>
            <span><a href="">注册</a></span>
        </div>
    </div>
    <div class="header">
        <div class="wrap">
            <div class="nav">
                <ul>
                    <li><a href="https://bj.ke.com/yezhu/maifang/" class="active">上传房源</a></li>
                    <li><a href="https://bj.ke.com/yezhu/maifang/?channel_id=2004"></a></li>
                    <li><a href="https://bj.zu.ke.com/proprietor/offer?city_id=110000&amp;city_name=%E5%8C%97%E4%BA%AC&amp;position=bk_pc_zl_rent">委托出租</a></li>
                </ul>
            </div>
            <a href="https://www.ke.com/client/" target="_blank" class="app">
                <span class="icon-app"></span>
                <span>下载苏乐居APP</span>
            </a>
        </div>
    </div>
    <div class="g-main">
        <div class="m-jumbotron">
            <div class="tit">上传要委托的信息</div>
            <div class="sub-tit">线下门店众多 · 快速全城推广 · 专业经纪人服务</div>
        </div>
        <div class="m-form" style="margin-left: 28%">
            <div class="form-box">
                <div class="box-l m-entry">
                    <dl class="compact">
                        <dt>小区所在区域</dt>
                        <dd class="city-select CLICKDATA" data-click-evtid="17835" data-click-event="WebClick">
                            <div class="city-name">苏州.吴中区</div>
                            <div class="link-btn">切换区域</div>
                        </dd>
                    </dl>
                    <dl>
                        <dt>小区</dt>
                        <dd class="wrap-sug">
                            <div class="u-sug" id="u-sug">
                                <input class="sugInput" name="resblock" type="text" autocomplete="off" placeholder="请输入小区名">
                                <ul style="display: none;"></ul>
                            </div>
                        </dd>
                    </dl>
                    <dl>
                        <dt>房屋地址</dt>
                        <dd>
                            <div class="u-select u-select-build" name="building">
                                <input placeholder="楼栋号" class="u-select-selected" type="text" value="">
                                <ul class="u-select-options hide" style="display: none;"></ul>
                            </div>
                            <div class="u-select u-select-build" name="unit">
                                <input placeholder="单元号" class="u-select-selected" type="text" value="">
                                <ul class="u-select-options hide" style="display: none;"></ul>
                            </div>
                            <div class="u-select u-select-build" name="house">
                                <input placeholder="门牌号" class="u-select-selected" type="text" value="">
                                <ul class="u-select-options hide" style="display: none;"></ul>
                            </div>
                        </dd>
                    </dl>
                    <dl>
                        <dt>期望租金</dt>
                        <dd>
                            <input name="expect_price" value="" type="text" placeholder="请输入您期望卖出的价格" autocomplete="off" style="width: 210px;">
                            <div class="unit">万元</div>
                        </dd>
                    </dl>
                    <dl>
                        <dt>出租方式</dt>
                        <dd>
                            <div class="u-select u-select-build" name="building">
                                <input placeholder="整租" class="u-select-selected" type="text" value="">
                                <ul class="u-select-options hide" style="display: none;"></ul>
                            </div>
                        </dd>
                    </dl>
                    <dl>
                        <dt>称呼</dt>
                        <dd>
                            <input name="user_name" value="" type="text" placeholder="我们应该如何称呼您" autocomplete="off" style="width: 250px;">
                        </dd>
                    </dl>
                    <dl>
                        <dt>手机号码</dt>
                        <dd>
                            <input name="user_mobile" value="" type="text" placeholder="您的联系方式，方便我们及时与您联系" autocomplete="off" style="width: 250px;">
                        </dd>
                    </dl>
                    <dl>
                        <dt>图形验证码</dt>
                        <dd>
                            <input name="verify_code" value="" type="text" placeholder="请输入图形验证码中的结果" autocomplete="off" style="width: 170px;">
                            <!-- <div class="btn-getcode-voice">获取语音验证码</div> -->
                            <!-- <div class="btn-getcode-sms">获取短信验证码</div> -->
                            <div class="btn-getcode-sms">
                                <img src="image/GeneratePictureUpgrade" style="width:100%;height:100%;">
                            </div>
                        </dd>
                    </dl>
                    <div class="notice-text">提示：您点击“提交委托”后，若您的房源通过平台初步审核，将会由平台上的经纪人和您取得联系，并对您的房源进行再次核实，核实无误后将与您建立服务关系。贝壳平台仅提供信息展示和网络技术服务。</div>
                </div>
                <div class="box-r m-deal" data-component="dealCard"></div>
            </div>
            <div class="m-submit" style="margin-left: -45%;">
                <div class="wrap">
                    <div class="btn-submit " data-view-evtid="17833" data-view-event="ItemExpo" data-click-evtid="17834" data-click-event="WebClick">确认发布</div>
                </div>
            </div>
        </div>
    </div>
    <div class="log_buttom">
        <div class="log-logo">
        </div>
        <div  class="log-buttom-icon">
            <div class="glyphicon glyphicon-film" style=" color: white;width:50px;height: 50px;font-size: 50px;margin-top: 40px;margin-left: 70px;"></div>
            <div style="margin-left: 65px;color: white;font-size: 15px;font-weight: bold;margin-top: 10px;">极速找房</div>
        </div>
        <div class="log-buttom-icon" >
            <i class="layui-icon layui-icon-service" style="font-size: 56px;color:white;margin-left:150px;display: block;margin-top: 30px;"></i>
            <div style="margin-left: 150px;color: white;font-size: 15px;font-weight: bold;margin-top: -5px;">在线客户</div>
        </div>
        <div class="log-buttom-icon" >
            <i class="layui-icon layui-icon-date" style="font-size: 56px;color:white;margin-left:150px;display: block;margin-top: 30px;"></i>
            <div style="margin-left: 150px;color: white;font-size: 15px;font-weight: bold;margin-top: -5px;">在线预约</div>
        </div>
        <div class="log-buttom-icon" >
            <i class="layui-icon layui-icon-find-fill" style="font-size: 56px;color:white;margin-left:150px;display: block;margin-top: 30px;"></i>
            <div style="margin-left: 150px;color: white;font-size: 15px;font-weight: bold;margin-top: -5px;">地图找房</div>
        </div>
        
    </div>
    <div class="buttom_nav">
        <div class="buttom_nav_center">
            <div class="recommend-area-rent">
                <div class="title">
                    推荐区域租房
                </div>
                <div class="recommend-content">
                    <span class="">
                        <a href="">吴中</a>
                        <a href="">吴江</a>
                        <a href="">园区</a>
                        <a href="">太仓</a>
                        <a href="">姑苏区</a>
                        <a href="">常说</a>
                        <a href="">平江</a>
                        <a href="">张家港</a>
                        <a href="">高新区</a>
                        <a href="">沧浪</a>
                        <a href="">相城</a>
                        <a href="">昆山</a>
                        <a href="">金阊</a>
                        </span>
                </div>
            </div>
            <div  style="border-top: 1px solid #8b8d92;margin-top: 80px;height: 15px;"></div>
            <div class="recommend-subway-rent">
                <div class="title">
                    推荐地铁租房
                </div>
                <div class="recommend-content">
                    <span class="">
                        <a href="">1号线</a>
                        <a href="">2号线</a>
                        <a href="">3号线</a>
                        <a href="">4号线支线</a>
                        <a href="">4号线</a>
                        </span>
                </div>
            </div>
            <div  style="border-top: 1px solid #8b8d92;margin-top: 40px;height: 15px;"></div>
            <div class="Recommend-type-rent">
                <div class="title">
                    推荐类型租房
                </div>
                <div class="recommend-content">
                    <span>
                        <a href="">苏州合租</a>
                        <a href="">苏州整租</a>
                        <a href="">苏州公寓</a>
                        </span>
                </div>
            </div>
            <div  style="border-top: 1px solid #8b8d92;margin-top: 40px;height: 15px;"></div>
            <div id="about-suleju">
                <div class="title" style="float: left;width: 200px;height: 300px;">
                    <div style="width: 200px;">
                        关于苏乐居
                    </div>
                    <div class="recommend-content" style="width:100px;margin-top: 0px;font-weight: normal;">
                        <span>
                            <a href="" >伙伴登录</a>
                            <a href="" style="margin-top: 10px;display: block;">网站地图</a>
                            </span>
                    </div>
                </div>
                <div class="title" style="float: left;width: 200px;">
                    <div style="width: 200px;">
                        苏乐居合作公寓
                    </div>
                    <div class="recommend-content" style="width:140px;margin-top: 0px;font-weight: normal;">
                        <span>
                            <a href="" >青年汇</a>
                            <a href="" style="margin-top: 10px;display: block;">银桥公寓</a>
                            <a href="" style="margin-top: 10px;display: block;">爱家精品公寓</a>
                            </span>
                    </div>
                </div>
                <div class="title" style="float: left;width: 200px;">
                    <div style="width: 200px;">
                        意见回馈
                    </div>
                    <div class="recommend-content" style="width:100px;margin-top: 0px;font-weight: normal;">
                        <span>
                            <a href="" >mail:2308844@qq.com</a>
                            </span>
                    </div>
                </div>
                <div class="title" style="float: left;width: 200px;">
                    <div style="width: 200px;">
                        联系苏乐居
                    </div>
                    <div class="recommend-content" style="width:300px;margin-top: 0px;font-weight: normal;">
                        <span>
                            <a href="" >10106006</a>
                            <br>
                            <br>
                            <a href="">周一～周日 8:00～23:00</a>
                            </span>
                    </div>
                </div><br>
                <div id="max-buttom-info">
                    <div id="suleju-web-info">
                        <div style="width:300px;margin-left:-110px">
                            ©2015 上海万间信息技术有限公司
                        </div>  
                        <a href="" style="margin-right: 25px;">
                            隐私协议 
                        </a>
                        <a href="">服务协议</a>
                        <div style="width:300px;margin-left:30px;margin-right: 30px;">上海市浦东新区晨晖路88号 金蝶软件园</div>
                        <a href=""> 沪ICP备15004537号-2    </a>
                    </div>
                    <div id="suleju-web-info">
                        <div style="width: 25px;height: 23px;
                            margin-left: -130px;background-image: url(image/gongan.png);background-size: 100%;">

                        </div>
                        <a style="width:260px;margin-left:-100px">
                            沪公网安备31011502006937号  
                        </a>  
                        <div style="width:300px;margin-left:0px;">增值电信业务许可证：沪B2-20170251</div>
                        
                    </div>
                    
                </div>
                
            </div>
        </div>
        
    </div>
</body>
</html>